<template>
<div id='app'>
  <div class='topbar'>
    <el-button>默认按钮</el-button>
    <el-button type='primary'>主要按钮</el-button>
    <el-button type='success'>成功按钮</el-button>
    <el-button type='info'>信息按钮</el-button>
  </div>
  <div class='left'>
    <div class='item' v-for='item in listData' :key='item.id'>
      {{item.name}} -- {{item.id}}
      <el-button size='mini' @click='del(item)' style='float: right'>
        删除
      </el-button>
    </div>

    <el-button style='margin-top: 10px' @click='add()'>
      添加
    </el-button>
  </div>

  <div class='right'>
    <div id='xxx' style='width: 100%; height:400px'></div>
  </div>
</div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      listData: []
    }
  },
  created () {
    this.listData = [{
      name: 'aaa',
      id: 1
    }, {
      name: 'bbb',
      id: 2
    }, {
      name: 'ccc',
      id: 3
    }, {
      name: 'ddd',
      id: 4
    }, {
      name: 'eee',
      id: 5
    }]
  },
  mounted () {
    debugger
    var myChart = window.echarts.init(document.getElementById('xxx'))

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: [
          '衬衫',
          '羊毛衫',
          '雪纺衫',
          '裤子',
          '高跟鞋',
          '袜子'
        ]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  methods: {
    del (item) {
      for (var i = 0; i < this.listData.length; i++) {
        var node = this.listData[i]
        if (node.id === item.id) {
          this.listData.splice(i, 1)
          return
        }
      }
    },
    add () {
      var data = {
        name: Math.random(),
        id: Math.floor(Math.random() * 1000)
      }
      this.listData.push(data)
    }
  }
}
</script>

<style>
html,
body {
  padding: 0;
  margin: 0;
}

#app {
  color: #2c3e50;
}

.topbar {
  padding: 10px 0;
  width: 100%;
  border-bottom: 1px solid gray;
  margin-bottom: 20px;
}

.left {
  float: left;
  width: 58%;
}

.right {
  float: right;
  width: 41%;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #dedede;
}

.item:hover {
  background-color: #eaeaea;
}
</style>
